<template>
  <div class="work">
    <l-header :headerText="headerText"></l-header>
    <div class="workList" ref="wrapper">
      <ul>
        <li v-for="(item,index) in newData" :key="index" class="work-li">
          <div class="workcontent">
            <p class="area">{{item.areaName}} {{item.tcNumber}}号柜</p>
            <p class="pending" v-if="item.workStatus === 0">待完成</p>
            <p class="finished" v-if="item.workStatus === 1">完成</p>
            <p class="unfinished" v-if="item.workStatus === 2">未完成</p>
            <p class="createTime">创建时间:{{item.createTime|moment}}</p>
            <p class="cleanTime" v-if="item.cleanTime != null">清扫时间:{{item.cleanTime|moment}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import LHeader from '@/components/header/Header'
import PopupBox from '@/components/popUpBox/popUpBox'
import { baseUrl } from '@/assets/js/var.js'
import BScroll from 'better-scroll'
export default {
  data (){
    return{
      headerText:'工作记录',
      newData:[],
      showLoading:false,
      number:'',//工号
      page:1,//页数
	    limit:10//每次请求的数目
    }
  },
  components :{
    LHeader
  },
  methods:{
    //初次获取
    getDate (){
      const qs = require('qs')
      let param = qs.stringify({
        'number':this.number
      })
      axios.post(`${baseUrl}/api/v1.1/washCleaner/work`,param)
      .then(response => {
        let data = response.data
        if (data.code === 7001000) {
          this.newData = data.data
          console.log(this.newData);
        }else if(data.code === 7001010){
          alert('未登录或登录时间超时')
          this.$router.replace('/')
        }else if(data.code === 7001026){
          alert('未有工作记录')
        }else{
          alert('未知错误')
        }
      })
      .catch(error => {
        console.log(error);
      })
    },
    getOtherData (){
      this.page = this.page +1
      const qs = require('qs')
      let param = qs.stringify({
        'page':this.page,
        'number':this.number
      })
      axios.post(`${baseUrl}/api/v1.1/washCleaner/work`,param)
      .then(response => {
        let data = response.data
        if (data.code === 7001000) {
          this.newData = this.newData.concat(data.data)
          this.scroll = new BScroll(this.$refs.wrapper)
          console.log(this.newData);
        }else if(data.code === 7001010){
          alert('未登录或登录时间超时')
          this.$router.replace('/')
        }else if(data.code === 7001026){
          alert('已无更多记录')
        }else{
          alert('未知错误')
        }
      })
      .catch(error => {
        console.log(error);
      })
    },
    scrollFn (){
      this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.wrapper, {
                        click: true,
                        scrollY: true,
                        probeType: 3
                    });
                }else{
                    this.scroll.refresh();
                }
                //touchEnd（手指离开以后触发）
                this.scroll.on('touchEnd', (pos) => {
                    //上拉加载 总高度>下拉的高度+10 触发加载更多
                    if(this.scroll.maxScrollY>pos.y+10){
                        this.showLoading = true
                        //使用refresh 方法 来更新scroll  解决无法滚动的问题
                        //this.scroll.refresh()
                        this.getOtherData()
                    }
                    //console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
                })
                //console.log(this.scroll.maxScrollY)
            });
        },//从localStorage中获取员工的工号number
    		getCleanerId (){
    			if (localStorage.waterUserInfo) {
    				const obj =  JSON.parse(localStorage.waterUserInfo)
    				return obj.number
    			}else{
    				this.$router.push('/')
    			}
    		}


  },
  mounted (){
    this.number = this.getCleanerId()
    this.scrollFn()
    this.getDate()
  }
}
</script>

<style lang="stylus" scoped>
    .workList
      position: absolute;
      overflow: hidden;
      top: 1rem
      right: 0
      left: 0
      bottom:0
      .work-li
        width: 90%
        height: 1.5rem
        margin-left: 5%
        margin-right: 5%
        margin-bottom: .1rem
        border: .01rem solid #ccc
        border-radius: .1rem
        .area
          width: 50%
          padding: .1rem .08rem
        .createTime
          width: 100%
          padding: .1rem .08rem
        .cleanTime
          width: 100%
          padding: .1rem .08rem
        .pending
          float: right;
          display: flex;
          flex-direction: column;
          margin-top: .13rem
          margin-right: .2rem
          font-size: .36rem
          //font-weight: bold;
          color: #E03636
          justify-content: center;
        .finished
          float: right;
          display: flex;
          flex-direction: column;
          margin-top: .13rem
          margin-right: .2rem
          font-size: .36rem
          //font-weight: bold;
          color: #0096FF
          justify-content: center;
        .unfinished
          float: right;
          display: flex;
          flex-direction: column;
          margin-top: .13rem
          margin-right: .2rem
          font-size: .36rem
          //font-weight: bold;
          color: #EDD0BE
          justify-content: center;

</style>
